<template>
  <div>
    给主表格加上边框:
    <el-switch v-model="parentBorder" />
    <br />
    内嵌表格的边框:
    <el-switch v-model="childBorder" />
    <el-table :data="tableData" :border="parentBorder" style="width: 100%">
      <el-table-column type="expand">
        <template #default="props">
          <div m="4">
            <el-table :data="props.row.depositDateList" :border="childBorder">
              <el-table-column label="存款时间 (单位：年)" prop="keeptime" />
              <el-table-column label="利率（%）" prop="rate" />
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="存款方式" prop="depositname" />
      <el-table-column label="描述" prop="description" />
    </el-table>
    <div class="m-4">
      <p>请选择存款方式</p>
      <el-cascader v-model="value" :options="options" @change="handleChange" />
      <el-input
        v-model="didAndDate.money"
        style="width: 200px"
        placeholder="请输入金额"
      />
      <el-button type="primary" @click="addddDeposit">存款</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { addDeposit, getDeposit } from '@/api/deposit'
import { ElMessage } from 'element-plus'

const parentBorder = ref(false)
const childBorder = ref(false)
const tableData = ref([])
const value = ref([])
const options = ref([])
const didAndDate = ref({
  uid: '',
  did: '',
  dateid: '',
  money: '',
})
getData()

function getData() {
  getDeposit().then(resp => {
    console.log(resp)
    tableData.value = resp
    getOptions()
  })
}
function handleChange(value) {
  didAndDate.value.did = value[0]
  didAndDate.value.dateId = value[1]
}
function getOptions() {
  tableData.value.forEach(item => {
    options.value.push({
      value: item.id,
      label: item.depositname,
      children: item.depositDateList.map(item => {
        return {
          value: item.id,
          label: item.keeptime + '年',
        }
      }),
    })
  })
}

function addddDeposit() {
  didAndDate.value.uid = window.localStorage.getItem('id')
  addDeposit(didAndDate.value).then(resp => {
    if (resp) {
      ElMessage.success('存款成功')
      location.reload()
    }
  })
}
</script>

<style scoped></style>
